<template>
	<view>
		<navbar title="商品详情" :autoBack="true"></navbar>
		<view class="" style="height: 20rpx;">

		</view>
		<view class="con">
			<scroll-view scroll-y="true" class="scbox">
				<view>
					<u-swiper :list="list1" height="795rpx" bgColor="#fff" @change="e => current = e.current" circular @click='clickp'>
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
					<view class="con__info">
						<view class="u-flex u-flex-y-center">
							<view class="con__price">
								<text style="font-size: 28rpx;font-family: PingFang SC;line-height: 40rpx;">¥</text>{{info.price}}
							</view>
							<view class="con__oldprice">
								￥{{info.oldprice}}
							</view>
						</view>
						<view class="con__name">
							{{info.name}}
						</view>
						<view class="" style="padding-right: 30rpx;">
							<view class="u-flex u-flex-y-center">
								<view class="con__label">
									选择
								</view>
								<view class="con__i">
							
								</view>
								<view class="con__v">
									商品数量
								</view>
								<u-number-box v-model="value" inputWidth='70rpx' integer button-size="54rpx" color="#282828"
									bgColor="#F5F5F5" iconStyle="color: #BBBBBB;"></u-number-box>
							</view>
							<view class="u-flex u-flex-y-center" style="margin-top: 55rpx;">
								<view class="con__label">
									月销
								</view>
								<view class="con__i">
							
								</view>
								<view class="con__v">
									{{info.monthnum}}
								</view>
							</view>
						</view>
						
					</view>
					<u-gap height="20rpx" bgColor="#f5f6f8"></u-gap>
					<view class="con__title">
						<image src="/static/goods/titlebg.png" class="con__title__bg" mode=""></image>
						商品详情
						<image src="/static/goods/titlebg.png" class="con__title__bg" mode=""></image>
					</view>
					<image @click="preview(content,index)" v-for="(item,index) in content" :src="item" :key="index" style="width: 750rpx;" mode="widthFix"></image>
				</view>
			</scroll-view>
			<view class="footer">
				<view class="footer__cartext">
					<image src="/static/goods/shopcar.png" class="footer__car" mode=""></image>
					购物车
				</view>
				<view class="footer__btn" @click="navto('/pages/goods/submitorder?id='+info.id+'&num='+value)">
					<image src="/static/goods/gmbg.png" class="footer__btn__bg" mode=""></image>
					<view class="footer__btn__text">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import goods from '@/api/_goods.js'
	export default {
		data() {
			return {
				list1: [],
				current: 0,
				value: 1,
				id:'',
				info:{},
				content:[]
			};
		},
		onLoad(o) {
			goods.getGoodsDetail({id:o.id}).then(res=>{
				if(res.data.code==1){
					this.info=res.data.data
					this.list1.push(this.$BASE_URL+this.info.image)
					// this.info.images.split(',').map(t=>{
					// 	this.list1.push(this.$BASE_URL+t)
					// })
					this.info.images.split(',').map(t=>{
						this.list1.push(this.$BASE_URL+t)
					})
					this.info.ontent_images.split(',').map(t=>{
						this.content.push(this.$BASE_URL+t)
					})
					// this.content=this.info.content.split(',')
				}
			})
		},
		methods:{
			clickp(e){
				this.preview(this.list1,e)
			}
		}
	}
</script>

<style lang="scss">
	.scbox {
		height: calc(100vh - var(--status-bar-height) - 44px - 20rpx - 167rpx);
		background-color: #fff;
	}

	::v-deep.u-swiper__indicator {
		bottom: 34rpx !important;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			width: 6rpx;
			height: 6rpx;
			background: #E6E6E6;
			border-radius: 50%;
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				width: 19rpx;
				height: 8rpx;
				background: #3262FD;
				border-radius: 4rpx;
			}
		}
	}

	.con {

		&__info {
			padding: 33rpx 0 40rpx 30rpx;

		}

		&__price {
			font-family: DIN Next LT Pro;
			font-weight: 800;
			font-size: 42rpx;
			color: #FF4E31;
			line-height: 40rpx;
		}

		&__oldprice {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #999999;
			line-height: 17rpx;
			text-decoration-line: line-through;
			margin-left: 20rpx;
			margin-bottom: 6rpx;
		}

		&__name {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 33rpx;
			color: #010101;
			line-height: 33rpx;
			padding-bottom: 34rpx;
			border-bottom: 1rpx solid #ECEBEA;
			margin-top: 32rpx;
			margin-bottom: 52rpx;
		}

		&__label {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #9C9C9C;
			line-height: 26rpx;
		}

		&__i {
			width: 3rpx;
			height: 23rpx;
			background: #F6F6F6;
			margin: 0 20rpx;
		}

		&__v {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			flex: 1;
		}
		&__title{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #2F2F2E;
			line-height: 30rpx;
			&__bg{
				width: 53rpx;
				height: 21rpx;
				margin: 0 9rpx;
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 167rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;

		&__cartext {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #3E5170;
			line-height: 22rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 25rpx 0 46rpx;
		}

		&__car {
			width: 52rpx;
			height: 52rpx;
			margin-bottom: 11rpx;
		}

		&__btn {
			width: 583rpx;
			height: 104rpx;
			position: relative;

			&__bg {
				width: 583rpx;
				height: 104rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				padding-top: 32rpx;
				position: relative;
				text-align: center;
			}
		}
	}
</style>